.ct-pager {
  --ct-pager-theme-color: var(--ct-color-primary);
  --ct-pager-size: 34px;
  --ct-pager-padding: 0 12px;
  --ct-pager-font-size: var(--ct-font-size-base);
}

.ct-pager {
  text-align: center;
  a {
    border: 1px solid #e1e2e3;
    background-color: #f0f2f5;
    color: var(--ct-text-color-primary);
    height: var(--ct-pager-size);
    display: inline-block;
    line-height: var(--ct-pager-size);
    border-radius: var(--ct-border-radius-small);
    padding: var(--ct-pager-padding);
    margin: 8px;
    font-size: var(--ct-pager-font-size);
    cursor: pointer;
    user-select: none;

    &:hover {
      color: var(--ct-pager-theme-color);
    }

    &.active {
      color: var(--ct-color-white);
      background-color: var(--ct-pager-theme-color);
      border-color: var(--ct-pager-theme-color);
    }
    &.disabled {
      color: var(--ct-disabled-text-color);
      cursor: not-allowed;
    }
  }
}

@each $type in danger, primary, success, info, error, warning {
  .ct-pager-type-#{$type} {
    --ct-pager-theme-color: var(--ct-color-#{$type});
  }
}

.ct-pager-size--small {
  --ct-pager-size: 25px;
  --ct-pager-padding: 0 8px;
  --ct-pager-font-size: var(--ct-font-size-small);
}

.ct-pager-size--large {
  --ct-pager-size: 45px;
  --ct-pager-padding: 0 16px;
  --ct-pager-font-size: var(--ct-font-size-large);
}
